// 文本垂直居中
@mixin text-center {
  $selector: &;

  @at-root {
    #{$selector}::after {
      display: inline-block;
      content: "";
      height: 100%;
      vertical-align: middle;
    }
  }
}
// 文本不换行
@mixin no-wrap() {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
// 文本溢出显示省略号
@mixin ell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@mixin ells($line: 2) {
  display: -webkit-box;
  overflow: hidden;
  /*! autoprefixer: off; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}
// 清除浮动
@mixin clearfix {
  $selector: &;

  @at-root {
    #{$selector}::before,
    #{$selector}::after {
      display: table;
      content: "";
    }
    #{$selector}::after {
      clear: both;
    }
  }
}

// 控制用户是否可以选中文本
@mixin user-select($value) {
  -webkit-user-select: $value;
  -moz-user-select: $value;
  -ms-user-select: $value;
}
// 背景图片
@mixin bg-image($url) {
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + "@3x.png");
  }
}
// 扩展点击区域(多用于移动端)
@mixin extend-click() {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
}
// 透明度
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}
// 美化占位符 placeholder 样式
@mixin beauty-placeholder($fz, $color: #999, $align: left) {
  &:-moz-placeholder {
    font-size: $fz;
    color: $color;
    text-align: $align;
  }
  &:-ms-input-placeholder {
    font-size: $fz;
    color: $color;
    text-align: $align;
  }
  &::-webkit-input-placeholder {
    font-size: $fz;
    color: $color;
    text-align: $align;
  }
}
// 美化文本的选中
@mixin beauty-select($color, $bgcolor) {
  &::selection {
    color: $color;
    background-color: $bgcolor;
  }
}
// 毛玻璃效果
@mixin blur($blur: 10px) {
  -webkit-filter: blur($blur);
  -moz-filter: blur($blur);
  -o-filter: blur($blur);
  -ms-filter: blur($blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='${blur}');
  filter: blur($blur);
  *zoom: 1;
}
// 滤镜: 将彩色照片显示为黑白照片、保留图片层次
@mixin grayscale() {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
// 文本居中
@mixin center($height: 100%) {
  height: $height;
  line-height: $height;
  text-align: center;
}
// 修改背景色等
@mixin background($border-radius: 5px, $bg-color: #eee, $color: #fff, $font-weight: 400) {
  border-radius: $border-radius;
  background-color: $bg-color;
  color: $color;
  font-weight: $font-weight;
}
// flex
@mixin flex($direction: row, $justify-content: flex-start, $align-items: flex-start, $flex-wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify-content;
  align-items: $align-items;
  flex-wrap: $flex-wrap;
}
// 鼠标hover显示下划线
@mixin hoverLine($height: 2px, $color: $color-text-primary) {
  position: relative;
  &:hover::after {
    content: "";
    position: absolute;
    height: $height;
    width: 100%;
    background-color: $color;
    bottom: 0;
    left: 0;
  }
}
